<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:import url="/WEB-INF/jsp/header.jsp">
	<c:param name="title" value="accueil"/>
</c:import>
<!--[if lt IE 8]><style>.bb {behavior:url("boxsizing.htc");}</style><![endif]-->
<div class="row-fluid">
    <div class="span8">  
        <div class="navbar">
            <div class="navbar-inner">
              <a class="brand" href="index.htm">Carnet d'Amis !</a>
              <ul class="nav">
                <li><a href="index.htm">Mon Mur</a></li>
                <li class="active"><a href="amis.htm">Mes amis</a></li>
                <li><a href="modifier.htm">Mon profil</a></li>
              </ul>
              <ul class="nav pull-right">
                <li><a href="logout.htm">Déconnexion (${user.pseudo})</a></li>
              </ul>
            </div>
        </div>
        
        <c:if test="${success != null}">
          <div class="alert alert-success">
          ${success}
          </div>
        </c:if>
              
        <c:if test="${recherche != null && lesAmis.size()==0}">
            <div class="bloc">
                <div class="bloc-header">
                    <div class="bloc-header-inner">
                        <h1>Aucun résultat trouvé</h1>
                    </div>
                </div>
                <div class="bloc-corps">
                    <div class="bloc-inner">
                        <p>Aucun profil ne correspond à votre recherche. Veuillez effectuer une nouvelle recherche dans le bloc ci-contre.</p>
                        <div style="clear:both"></div>
                    </div>
                </div>
                <div class="bloc-footer">
                    <div class="bloc-footer-inner">

                    </div>
                </div>
            </div>
        </c:if>
        

        <div class="row-fluid">
            
            <c:forEach var="ami" items="${lesAmis}">       
                <div class="bloc ami">
                    <div class="bloc-header">
                        <div class="bloc-header-inner">
                            <h1><a href="profil.htm?id=${ami.getId()}">${ami.getPseudo()}</a></h1>
                        </div>
                    </div>
                    <div class="bloc-corps">
                        <div class="bloc-inner">
                            <c:if test="${recherche == null}">
                                <a href="supprimer_ami.htm?id=${ami.id}" class="hide supprimer-amis btn btn-mini btn-alert"><i class="icon icon-white icon-remove"></i></a>
                            </c:if>
                             <c:if test="${ami.getAvatar() != null}">
                                 <img class="avatar" src="${ami.getAvatar()}">
                            </c:if>                            
                        <div style="clear:both"></div>
                        <c:if test="${recherche != null}">
                            <p>
                                <c:if test="${recherche eq 'nom'}">
                                    nom: ${ami.getNom()}
                                </c:if>
                                <c:if test="${recherche eq 'prenom'}">
                                    prenom: ${ami.getPrenom()}
                                </c:if>
                            </p>
                            <div class="request-box">
                                <a class="btn btn-mini btn-primary">Inviter comme ami !</a>
                                <form class="hide" action="amis.htm" method="POST">
                                    <input type="text" class="ami-request" name="message" placeholder="un petit message ?">
                                    <input type="hidden" name="destinataire" value="${ami.getId()}">
                                    <input type="submit" class="btn btn-mini btn-primary" value="Envoyer la demande">
                                </form>
                            </div>
                        </c:if>
                        </div>
                    </div>
                    <div class="bloc-footer">    
                        <div class="bloc-footer-inner">

                        </div>
                    </div>
                </div>    
            </c:forEach>
            
        </div>
    </div>
    <div class="span4">
            <div class="bloc login-bloc">
                <div class="bloc-header">
                    <div class="bloc-header-inner">
                        <h1>Cherchez de nouveaux amis !</h1>
                    </div>
                </div>
                <div class="bloc-corps">
                    <div class="bloc-inner">

                        <form action="rechercher.htm" method="POST" class="form-vertical">
                              <div class="control-group">
                                <label class="control-label" for="inputType">Chercher</label>
                                <div class="controls">
                                    <select name="type" id="inputType">
                                        <option value="nom">par Nom</option>
                                        <option value="prenom">par Prénom</option>
                                        <option value="pseudo">par Pseudo</option>
                                    </select>
                                </div>
                              </div>
                              <div class="control-group">
                                <label class="control-label" for="inputRecherche">correspondant à</label>
                                <div class="controls">
                                    <input type="text" name="recherche" id="inputRecherche"/>
                                </div>
                              </div>
                              <div class="control-group">
                                <div class="controls">
                                  <button type="submit" class="btn btn-primary">Chercher !</button>
                                  <c:if test="${recherche != null}">
                                      ${lesAmis.size()} résultats
                                  </c:if>
                                </div>
                              </div>
                        </form>
                    </div>
                </div>
                <div class="bloc-footer">    
                    <div class="bloc-footer-inner">

                    </div>
                </div>
            </div>
            
    </div>
</div>
<script type="text/javascript">
$(document).ready(function(){
   $(".request-box a").click(function(){
       $(this).toggle();
       $(this).parent().find("form").toggle();
   }) 
});
</script>
<c:import url="/WEB-INF/jsp/footer.jsp"/>